<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
       <canvas id="cvs" width="400" height="400"></canvas>
    </div>
    <script>
        // 清除当前路径，开启新路径 beginPath()
       var canvas = document.getElementById('cvs');
       var context = canvas.getContext("2d");
       function rectangle(startX, startY, width, height, lineWidth, strokeStyle, fillStyle) {
         context.beginPath()
         context.moveTo(startX, startY);
         context.lineTo(startX+width, startY);
         context.lineTo(startX+width, startY+height);
         context.lineTo(startX, startY+height);
         context.strokeStyle = strokeStyle;
         context.fillStyle = fillStyle;
         context.lineWidth = lineWidth;
         context.closePath();
         context.stroke();
         context.fill()
       }

       rectangle(100,100,150,200,8,'red','yellow')   
       rectangle(10,10,50,20,3,'blue', 'skyblue')
    </script>
</body>
</html>